<template>
	<div class="home">
		<!-- 顶部 -->
		<header>
			<!-- 顶部左右nav -->
			<div class="head-nav">
				<ul class="left">
					<li>
						<i class="head-icon el-icon-s-home"></i>
						天猫首页
					</li>
					<li>喵，欢迎来天猫</li>
					<li>请登录</li>
					<li>免费注册</li>
				</ul>
				<ul class="right">
					<li>
						我的淘宝
						<i class="el-icon-caret-bottom"></i>
					</li>
					<li>
						<i class="head-icon el-icon-shopping-cart-2"></i>
						购物车
					</li>
					<li>
						收藏夹
						<i class="el-icon-caret-bottom"></i>
					</li>
					<li>
						<i class="head-icon el-icon-mobile-phone"></i>
						手机版
					</li>
					<li>淘宝网</li>
					<li>
						商家支持
						<i class="el-icon-caret-bottom"></i>
					</li>
					<li>
						<i class="head-icon el-icon-s-operation"></i>
						网站导航
						<i class="el-icon-caret-bottom"></i>
					</li>
				</ul>
			</div>
			<!-- 顶部三栏内容 -->
			<div class="head-content">
				<!-- logo部分 -->
				<div class="logo-box">
					<img
						src="http://img.alicdn.com/tfs/TB11ojWRXXXXXafaFXXXXXXXXXX-190-27.png"
						alt="TMlogo"
					/>
				</div>
				<!-- 搜索部分 -->
				<div class="extra">
					<!-- 左部搜索 -->
					<div class="ex-left">
						<div class="search-box">
							<input
								type="search"
								placeholder="请输入要搜索的手表"
								v-model="searchTit"
								@keyup.enter="onSearch"
							/>
							<button>搜 索</button>
						</div>
						<ul>
							<li>手表女</li>
							<li>手表男</li>
							<li>浪琴</li>
							<li>卡西欧</li>
							<li>西铁城</li>
							<li>手表卡西欧</li>
						</ul>
					</div>
					<!-- 右部二维码 -->
					<div class="ex-right">
						<img
							src="//img.alicdn.com/tfs/TB1vg2XbQL0gK0jSZFxXXXWHVXa-380-160.png"
							alt=""
						/>
					</div>
				</div>
			</div>
		</header>
		<!-- 搜索头部分 -->
		<div class="search-title">
			<ul>
				<li>
					<span>全部</span>
					<i class="el-icon-arrow-right"></i>
				</li>
				<li v-show="!brandFlag">
					<span>
						品牌:{{ crumb.brandCrumb.title }}
						<em @click="delBrand">✖</em>
					</span>
					<i class="el-icon-arrow-right"></i>
				</li>
				<li v-show="!typeFlag">
					<span>
						分类:{{ crumb.typeCrumb.title }}
						<em @click="delType">✖</em>
					</span>
					<i class="el-icon-arrow-right"></i>
				</li>
				<li v-show="!shapeFlag">
					<span>
						形状:{{ crumb.shapeCrumb.title }}
						<em @click="delShape">✖</em>
					</span>
					<i class="el-icon-arrow-right"></i>
				</li>
				<li class="t-search-box">
					<input
						type="text"
						placeholder="请输入要搜索的手表"
						v-model="searchCon"
						@keyup.enter="onSearch"
					/>
					<i class="el-icon-search"></i>
				</li>
			</ul>
			<p>
				共
				<span>{{ dataList.length }}</span>
				件相关商品
			</p>
		</div>
		<!-- 分类部分 -->
		<div class="category">
			<!-- 品牌部分 -->
			<div class="choice brand-box" v-show="brandFlag">
				<div>品牌</div>
				<div class="choice-content brand-content">
					<ul>
						<li
							v-for="item in brandList"
							:key="item.id"
							@click="onChooseBrand(item.brand, item)"
						>
							{{ item.title }}
						</li>
					</ul>
				</div>
			</div>
			<!-- 类型部分 -->
			<div class="choice type-box" v-show="typeFlag">
				<div>分类</div>
				<div class="choice-content type-content">
					<ul>
						<li
							v-for="item in typeList"
							:key="item.id"
							@click="onChooseType(item.type, item)"
						>
							{{ item.title }}
						</li>
					</ul>
				</div>
			</div>
			<!-- 形状部分 -->
			<div class="choice shape-box" v-show="shapeFlag">
				<div>其他分类</div>
				<div class="choice-content shape-content">
					<ul>
						<li
							v-for="item in shapeList"
							:key="item.id"
							@click="onChooseShape(item.shape, item)"
						>
							{{ item.title }}
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 手表内容展示 -->
		<div class="main">
			<ul>
				<li v-for="item in dataList" :key="item.id">
					<div>
						<img :src="item.img" alt="" />
						<p class="pri"><small>￥</small>{{ item.price }}</p>
						<p>{{ item.title }}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
/* 引入手表所有数据请求 */
import { getWatch } from "@/utils/api/home";
export default {
	//组件名
	name: "Home",

	//数据
	data() {
		return {
			/* 顶部搜索内容 */
			searchTit: "",
			/* 中部搜索内容 */
			searchCon: "",

			/* 品牌数据 */
			brandList: [],
			/* 分类数据 */
			typeList: [],
			/* 形状数据 */
			shapeList: [],
			/* 手表数据 */
			dataList: [],

			/* 选择品牌 */
			brandChoose: [],
			/* 选择分类 */
			typeChoose: [],
			/* 选择形状 */
			shapeChoose: [],
			/* 选择品牌和分类 */
			bAndtChoose: [],
			/* 选择品牌和形状 */
			bAndsChoose: [],
			/* 选择分类和形状 */
			tAndsChoose: [],

			/* 品牌是否选择 */
			brandFlag: true,
			/* 分类是否选择 */
			typeFlag: true,
			/* 形状是否选择 */
			shapeFlag: true,

			/* 面包屑对象 */
			crumb: {
				/* 品牌面包屑 */
				brandCrumb: "",
				/* 分类面包屑 */
				typeCrumb: "",
				/* 形状面包屑 */
				shapeCrumb: "",
			},
		};
	},

	//挂载后
	mounted() {
		/* 获取数据 */
		getWatch().then((res) => {
			this.brandList = res.brands;
			this.typeList = res.types;
			this.shapeList = res.shapes;
			this.dataList = res.data;
			this.copyDataList = res.data;
		});
	},

	//方法
	methods: {
		/* 搜索 */
		onSearch(e) {
			let val = e.target.value;
			this.dataList = this.copyDataList.filter((item) => {
				if (
					item.title.includes(val) ||
					item.brand.includes(val) ||
					item.type.includes(val) ||
					item.shape.includes(val)
				) {
					return item;
				}
				this.searchTit = this.searchCon;
			});
		},
		/* 品牌选择 */
		onChooseBrand(result, item) {
			this.crumb.brandCrumb = item;
			/* 保存选择品牌后的数据 */
			this.brandChoose = this.copyDataList.filter(
				(item) => item.brand == result
			);
			if (this.typeChoose.length && !this.shapeChoose.length) {
				console.log("选品牌有分类无形状");
				/* 根据分类筛选品牌 */
				this.dataList = this.typeChoose.filter((item) => item.brand == result);
				/* 保存选择品牌和分类后的数据 */
				this.bAndtChoose = this.typeChoose.filter(
					(item) => item.brand == result
				);
			} else if (this.shapeChoose.length && !this.typeChoose.length) {
				console.log("选品牌有形状无分类");
				/* 根据形状筛选品牌 */
				this.dataList = this.shapeChoose.filter((item) => item.brand == result);
				/* 保存选择品牌和形状后的数据 */
				this.bAndsChoose = this.shapeChoose.filter(
					(item) => item.brand == result
				);
			} else if (this.shapeChoose.length && this.typeChoose.length) {
				console.log("选品牌有分类有形状");
				/* 根据分类和形状筛选品牌 */
				this.dataList = this.tAndsChoose.filter((item) => item.brand == result);
			} else {
				console.log("选品牌无分类无形状");
				/* 单选品牌 */
				this.dataList = this.copyDataList.filter(
					(item) => item.brand == result
				);
			}
			/* 品牌选择隐藏 */
			this.brandFlag = false;
		},
		/* 分类选择 */
		onChooseType(result, item) {
			this.crumb.typeCrumb = item;
			/* 保存分类选择后的数据 */
			this.typeChoose = this.copyDataList.filter((item) => item.type == result);
			if (this.brandChoose.length && !this.shapeChoose.length) {
				console.log("选分类有品牌无形状");
				/* 根据品牌筛选分类 */
				this.dataList = this.brandChoose.filter((item) => item.type == result);
				/* 保存选择品牌和分类后的数据 */
				this.bAndtChoose = this.brandChoose.filter(
					(item) => item.type == result
				);
			} else if (this.shapeChoose.length && !this.brandChoose.length) {
				console.log("选分类有形状无品牌");
				/* 根据形状筛选分类 */
				this.dataList = this.shapeChoose.filter((item) => item.type == result);
				/* 保存选择分类和形状后的数据 */
				this.tAndsChoose = this.shapeChoose.filter(
					(item) => item.type == result
				);
			} else if (this.brandChoose.length && this.shapeChoose.length) {
				console.log("选分类有品牌有形状");
				/* 根据品牌和形状筛选分类 */
				this.dataList = this.bAndsChoose.filter((item) => item.type == result);
			} else {
				console.log("选分类无品牌无形状");
				/* 单选分类 */
				this.dataList = this.copyDataList.filter((item) => item.type == result);
			}

			/* 分类选择隐藏 */
			this.typeFlag = false;
		},
		/* 形状选择 */
		onChooseShape(result, item) {
			this.crumb.shapeCrumb = item;
			/* 保存形状选择后的数据 */
			this.shapeChoose = this.copyDataList.filter(
				(item) => item.shape == result
			);
			if (this.brandChoose.length && !this.typeChoose.length) {
				console.log("选形状有品牌无分类");
				/* 根据品牌筛选形状 */
				this.dataList = this.brandChoose.filter((item) => item.shape == result);
				/* 保存选择分类和形状后的数据 */
				this.bAndsChoose = this.brandChoose.filter(
					(item) => item.shape == result
				);
			} else if (this.typeChoose.length && !this.brandChoose.length) {
				console.log("选形状有分类无品牌");
				/* 根据分类筛选形状 */
				this.dataList = this.typeChoose.filter((item) => item.shape == result);
				/* 保存选择分类和形状后的数据 */
				this.tAndsChoose = this.typeChoose.filter(
					(item) => item.shape == result
				);
			} else if (this.brandChoose.length && this.typeChoose.length) {
				console.log("选形状有品牌有分类");
				/* 根据品牌和分类筛选形状 */
				this.dataList = this.bAndtChoose.filter((item) => item.shape == result);
			} else {
				console.log("选形状无品牌无分类");
				/* 单选形状 */
				this.dataList = this.copyDataList.filter(
					(item) => item.shape == result
				);
			}
			/* 形状选择隐藏 */
			this.shapeFlag = false;
		},
		/* 取消品牌 */
		delBrand() {
			/* 品牌选择显示 */
			this.brandFlag = true;
			/* 面包屑对象品牌项置空 */
			this.crumb.brandCrumb = {};
			/* 选中品牌置空 */
			this.brandChoose = [];

			if (!this.typeFlag && this.shapeFlag) {
				console.log("删品牌有分类无形状");
				/* 分类存在形状不存在 */
				this.dataList = this.copyDataList.filter(
					(item) => item.type == this.crumb.typeCrumb.type
				);
			} else if (!this.shapeFlag && this.typeFlag) {
				console.log("删品牌有形状无分类");
				/* 形状存在分类不存在 */
				this.dataList = this.copyDataList.filter(
					(item) => item.shape == this.crumb.shapeCrumb.shape
				);
			} else if (!this.typeFlag && !this.shapeFlag) {
				console.log("删品牌有分类有形状");
				/* 分类形状都存在 */
				this.dataList = this.copyDataList.filter(
					(item) =>
						item.type == this.crumb.typeCrumb.type &&
						item.shape == this.crumb.shapeCrumb.shape
				);
			} else {
				console.log("删品牌无分类无形状");
				/* 分类形状都不存在 */
				this.dataList = this.copyDataList;
			}
		},
		/* 取消分类 */
		delType() {
			/* 分类选择显示 */
			this.typeFlag = true;
			/* 面包屑对象分类项置空 */
			this.crumb.typeCrumb = {};
			/* 选中分类置空 */
			this.typeChoose = [];
			if (!this.brandFlag && this.shapeFlag) {
				console.log("删分类有品牌无形状");
				/* 品牌存在形状不存在 */
				this.dataList = this.copyDataList.filter(
					(item) => item.brand == this.crumb.brandCrumb.brand
				);
			} else if (!this.shapeFlag && this.brandFlag) {
				console.log("删分类有形状无品牌");
				/* 形状存在品牌不存在 */
				this.dataList = this.copyDataList.filter(
					(item) => item.shape == this.crumb.shapeCrumb.shape
				);
			} else if (!this.brandFlag && !this.shapeFlag) {
				console.log("删分类有品牌有形状");
				/* 品牌形状都存在 */
				this.dataList = this.copyDataList.filter(
					(item) =>
						item.brand == this.crumb.brandCrumb.brand &&
						item.shape == this.crumb.shapeCrumb.shape
				);
			} else {
				console.log("删分类无品牌无形状");
				/* 品牌形状都不存在 */
				this.dataList = this.copyDataList;
			}
		},
		/* 取消形状 */
		delShape() {
			/* 形状选择显示 */
			this.shapeFlag = true;
			/* 面包屑对象形状项置空 */
			this.crumb.shapeCrumb = {};
			/* 选中形状置空 */
			this.shapeChoose = [];
			if (!this.brandFlag && this.typeFlag) {
				console.log("删形状有品牌无分类");
				/* 品牌存在分类不存在 */
				this.dataList = this.copyDataList.filter(
					(item) => item.brand == this.crumb.brandCrumb.brand
				);
			} else if (!this.typeFlag && this.brandFlag) {
				console.log("删形状有分类无品牌");
				/* 分类存在品牌不存在 */
				this.dataList = this.copyDataList.filter(
					(item) => item.type == this.crumb.typeCrumb.type
				);
			} else if (!this.brandFlag && !this.typeFlag) {
				console.log("删形状有品牌有分类");
				/* 品牌分类都存在 */
				this.dataList = this.copyDataList.filter(
					(item) =>
						item.brand == this.crumb.brandCrumb.brand &&
						item.type == this.crumb.typeCrumb.type
				);
			} else {
				console.log("删形状无品牌无分类");
				/* 品牌分类都不存在 */
				this.dataList = this.copyDataList;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.home {
	width: 100%;
	height: 100%;
}
header {
	width: 100%;

	.head-nav {
		width: 100%;
		height: 26px;
		padding: 0 120px;
		box-sizing: border-box;
		background-color: #f2f2f2;
		border: 1px solid #ddd;
		> ul {
			width: 100%;
			height: 100%;
			font-size: 12px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #999999;
			li {
				height: 100%;
				display: flex;
				align-items: center;
				cursor: pointer;
				&:hover {
					text-decoration: underline;
					color: #ff0036;
				}
				.head-icon {
					color: #ff0036;
				}
			}
			&.left {
				width: 300px;
				float: left;
			}
			&.right {
				width: 480px;
				float: right;
			}
		}
	}
	.head-content {
		width: 1200px;
		height: 100px;
		margin: 0 auto;
		display: flex;
		border-bottom: 2px solid #ddd;
		.logo-box {
			width: 280px;
			img {
				padding: 30px 0 0;
			}
		}
		.extra {
			width: 900px;
			height: 100%;
			display: flex;
			justify-content: space-between;

			.ex-left {
				width: 540px;
				.search-box {
					width: 498px;
					height: 30px;
					margin: 25px 0 0;
					border: solid #ff0036;
					border-width: 3px 0 3px 3px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					input {
						width: 408px;
						height: 100%;
						border: none;
						outline: none;
						text-indent: 0.5em;
						box-shadow: 0px 2px 2px 2px #ccc inset;
					}
					button {
						width: 90px;
						height: 100%;
						border: none;
						outline: none;
						background-color: #ff0036;
						color: #fff;
						font-size: 16px;
					}
				}
				ul {
					width: 448px;
					height: 30px;
					display: flex;
					align-items: center;
					font-size: 12px;
					li {
						padding: 0 10px;
						color: #999;
						cursor: pointer;
						border-right: 1px solid #999;
						&:hover {
							color: #ff0036;
						}
						&:first-child {
							padding-left: 0;
						}
						&:last-child {
							border: none;
						}
					}
				}
			}
			.ex-right {
				width: 200px;
				height: 90px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.search-title {
	width: 1200px;
	height: 40px;
	font-size: 14px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #666666;
	ul {
		display: flex;
		align-items: center;
		font-size: 13px;
		li {
			span {
				color: #ff0036;
				border: 1px dotted #ff0036;
				border-top-style: solid;
				border-radius: 2px;
				padding: 2px 5px;
				cursor: pointer;
				em {
					font-style: normal;
					margin-left: 4px;
					cursor: pointer;
				}
			}
			&:first-child {
				margin-left: 10px;
				span {
					color: #999;
					border: none;
					padding: 0;
				}
			}
		}
		.t-search-box {
			width: 160px;
			height: 22px;
			display: flex;
			align-items: center;
			border: 1px solid #aaa;
			input {
				width: 140px;
				border: none;
				outline: none;
				font-size: 12px;
				text-indent: 1em;
			}
		}
	}
	p {
		span {
			font-weight: bolder;
			margin: 0 2px;
			font-size: 13px;
		}
	}
}
.category {
	width: 1200px;
	margin: 0 auto;
	.choice {
		width: 100%;
		display: flex;
		font-size: 12px;
		color: #b0a59f;
		box-sizing: border-box;
		border: 1px solid #e6e2e1;
		border-top: none;
		& > div:first-child {
			width: 100px;
			height: 100%;
			box-sizing: border-box;
			background-color: #f7f5f5;
			box-sizing: border-box;
			padding: 10px;
		}
	}
	.choice-content {
		width: 92%;
		height: 100%;
		ul {
			display: flex;
			flex-wrap: wrap;
			padding: 8px 26px;
			align-content: center;
			li {
				padding: 5px 15px;
				color: #806f66;
				cursor: pointer;
				&:hover {
					color: #ff0036;
				}
			}
		}
	}
	.brand-box {
		height: 80px;
		border: 2px solid #d1ccc7;
	}
	.type-box {
		height: 60px;
		border-bottom: 1px dotted #e6e2e1;
		.type-content {
			li {
				padding: 3px 30px 3px 15px;
				&:hover {
					color: #ff0036;
				}
			}
		}
	}
	.shape-box {
		height: 36px;
		border-bottom: 1.5px solid #d1ccc7;
		.shape-content {
			li {
				padding: 3px 15px;
			}
		}
	}
}
.main {
	width: 1200px;
	margin: 10px auto;
	ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		li {
			width: 220px;
			height: 300px;
			font-size: 12px;
			margin-bottom: 10px;
			margin-right: 25px;
			&:nth-child(5n) {
				margin: 0;
			}
			div {
				width: 100%;
				min-height: 98%;
				height: auto;
				border: 1px solid #f5f5f5;
				transition: border-color 0.2s ease-in;
				&:hover {
					cursor: pointer;
					margin: -3px;
					border: 4px solid #ff0036;
				}
				img {
					width: 200px;
					height: 210px;
					display: block;
					margin: 5px auto;
				}
				p {
					padding: 2px 10px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1; //定义行数
					overflow: hidden;
					&.pri {
						color: #ff0036;
						font-size: 20px;
					}
				}
			}
		}
	}
}
</style>
